<template>
  <div>
    <BlogHeader :currentRouter="currentRouter"></BlogHeader>
    <GitHubFlag></GitHubFlag>
    <MusicPlayer></MusicPlayer>
    <div class="picsbox">
      <el-carousel :interval="3000" arrow="always">
        <el-carousel-item v-for="banner in bannerList" :key="banner.id">
          <a :href="banner.linkUrl">
            <img
              :src="banner.imgSrc"
              alt="个人博客"
              data-bd-imgshare-binded="1"
            />
          </a>
          <span class="imginfo">{{ banner.title }}</span>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="hotmessage">
      <div class="news">
        <div class="item">
          <i style="color: #ff0000" class="fa fa-heart" aria-hidden="true"></i>
          <VueTypedJs
            :strings="expression"
            :typeSpeed="200"
            :cursorChar="'ღ'"
            :startDelay="1000"
            :loop="true"
            :loopCount="Infinity"
          >
            <span id="typedItem" class="typing"></span>
          </VueTypedJs>
          <i style="color: #ff0000" class="fa fa-heart" aria-hidden="true"></i>
        </div>
      </div>
    </div>
    <div class="blogcontainer">
      <div class="blogsbox">
        <div class="blogs" v-for="item in articleList">
          <h3 class="blogtitle" @click="switchDetail(item.id)">
            {{ item.title }}
          </h3>
          <span v-if="item.showStyle == 1" class="blogpic">
            <a :href="['/detail/' + item.id]" :title="item.title">
              <img
                v-if="item.coverImageList && item.coverImageList.length > 0"
                :src="item.coverImageList[0].coverImage"
                alt=""
              />
            </a>
          </span>
          <span v-else-if="item.showStyle == 2" class="bplist">
            <ul v-if="item.coverImageList && item.coverImageList.length > 0">
              <li v-for="img in item.coverImageList">
                <a :href="['/detail/' + item.id]" :title="item.title">
                  <img :src="img.coverImage" alt="" />
                </a>
              </li>
            </ul>
          </span>
          <span v-else-if="item.showStyle == 3" class="bigpic">
            <a
              :href="['/detail/' + item.id]"
              :title="item.title"
              target="_blank"
            >
              <img
                v-if="item.coverImageList && item.coverImageList.length > 0"
                :src="item.coverImageList[0].coverImage"
                alt=""
              />
            </a>
          </span>
          <a :href="['/detail/' + item.id]" target="_blank"
            ><p class="blogtext" v-html="item.abstractContent">
              {{ item.abstractContent }}
            </p></a
          >
          <div class="bloginfo">
            <ul>
              <li>
                <span v-if="item.articleType" class="label label-warn"
                  >转载</span
                >
                <span v-else class="label label-success">原创</span>
              </li>
              <li class="author">{{ item.author }}</li>
              <li class="lmname">{{ item.categoryName }}</li>
              <li class="timer">{{ item.createTime }}</li>
              <li class="view">
                <span>{{ item.viewCount }}</span
                >已阅读
              </li>
            </ul>
          </div>
        </div>
        <div class="loading" v-show="loading">
          <img src="@/assets/image/loading.svg" />
        </div>
        <div v-show="!showMore" style="text-align: center">
          <svg
            t="1580220073008"
            class="icon"
            viewBox="0 0 1100 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="26675"
            width="32"
            height="32"
          >
            <path
              d="M998.4 888.685714h-138.971429c-25.6 0-43.885714-21.942857-43.885714-43.885714 0-25.6 18.285714-43.885714 43.885714-43.885714h102.4l40.228572-215.771429h-95.085714c-25.6 0-43.885714-21.942857-43.885715-43.885714 0-25.6 18.285714-43.885714 43.885715-43.885714h149.942857c14.628571 0 25.6 7.314286 32.914285 14.628571 7.314286 10.971429 10.971429 21.942857 10.971429 36.571429l-54.857143 307.2c-7.314286 18.285714-25.6 32.914286-47.542857 32.914285zM709.485714 1024H135.314286c-21.942857 0-40.228571-14.628571-43.885715-40.228571L14.628571 449.828571c-3.657143-14.628571 3.657143-25.6 10.971429-36.571428 7.314286-10.971429 21.942857-14.628571 32.914286-14.628572h727.771428c10.971429 0 25.6 7.314286 32.914286 14.628572 7.314286 10.971429 10.971429 21.942857 10.971429 36.571428l-76.8 533.942858c-3.657143 25.6-21.942857 40.228571-43.885715 40.228571zM409.6 362.057143c-3.657143 0-3.657143 0 0 0-102.4-43.885714-102.4-109.714286-102.4-113.371429 0-32.914286 25.6-58.514286 58.514286-58.514285 18.285714 0 32.914286 7.314286 43.885714 21.942857 10.971429-10.971429 29.257143-21.942857 43.885714-21.942857 29.257143 0 54.857143 25.6 54.857143 58.514285 0 3.657143 0 69.485714-98.742857 113.371429z m-259.657143-109.714286H146.285714C0 186.514286 0 95.085714 0 84.114286 0 40.228571 40.228571 0 87.771429 0 109.714286 0 135.314286 10.971429 149.942857 29.257143 164.571429 10.971429 190.171429 0 215.771429 0c43.885714 0 80.457143 36.571429 80.457142 84.114286 0 7.314286 0 102.4-142.628571 164.571428l-3.657143 3.657143z"
              p-id="26676"
              fill="#d81e06"
            ></path>
          </svg>
        </div>
      </div>
      <!--blogsbox end-->
      <div class="sidebar">
        <div class="cate">
          <div class="sidecloumn">
            <div><h2 class="hometitle">分类</h2></div>
          </div>
          <el-tree
            ref="mycatetree"
            node-key="id"
            :load="loadCategory"
            @check="treeNodeClick"
            :check-on-click-node="true"
            lazy
            :props="treeData"
            show-checkbox
            class="e-tree"
          >
          </el-tree>
        </div>
        <div class="tuijian">
          <div class="sidecloumn">
            <div><h2 class="hometitle">动态</h2></div>
          </div>
          <template>
            <el-tabs v-model="tabActiveName" type="card">
              <el-tab-pane label="推荐" name="first">
                <ul class="sidenews" v-if="recommendArticlelist">
                  <li v-for="article in recommendArticlelist">
                    <a :href="['/detail/' + article.id]" target="_blank"
                      >{{ article.title }}
                    </a>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="热门" name="second">
                <ul class="sidenews" v-if="topReadArticlelist">
                  <li v-for="article in topReadArticlelist">
                    <a :href="['/detail/' + article.id]" target="_blank"
                      >{{ article.title }}
                    </a>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="吐槽" name="third">
                <img style="width: 100%" src="/images/fouren.jpg" />
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <div class="cloud sidecloumn">
          <div><h2 class="hometitle">标签云</h2></div>
          <ul v-if="tagList" id="tagcontainer"></ul>
        </div>
        <div class="links sidecloumn">
          <div><h2 class="hometitle">友情链接</h2></div>
          <ul v-if="partnerList">
            <li v-for="partner in partnerList">
              <a
                :href="partner.siteUrl"
                :alt="partner.siteDesc"
                target="_blank"
                >{{ partner.siteName }}</a
              >
            </li>
          </ul>
        </div>
        <!-- 设置固定关注我们 -->
        <Focus></Focus>
      </div>
    </div>
    <BlogFooter></BlogFooter>
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import '@/assets/blog/base.css'
import '@/assets/blog/index.css'
import '@/assets/blog/m.css'

import BlogHeader from '../components/BlogHeader'
import BlogFooter from '../components/BlogFooter'
import BackToTop from '../components/BackToTop'
import GitHubFlag from '../components/GitHubFlag'
import MusicPlayer from '../components/MusicPlayer'
import Focus from '../components/Focus'
import scrollReveal from 'scrollreveal'
import { VueTypedJs } from 'vue-typed-js'
import {
  ArticleApi,
  CategoryApi,
  BannerApi,
  TagApi,
  PartnerApi,
  MusicApi
} from '@/api/blog'
export default {
  name: 'home',
  components: {
    BlogHeader,
    GitHubFlag,
    MusicPlayer,
    BlogFooter,
    BackToTop,
    Focus,
    VueTypedJs
  },
  data() {
    return {
      currentRouter: this.$route,
      queryForm: {
        pageIndex: 1,
        pageSize: 10,
        title: '',
        tag: '',
        categoryCodes: []
      },
      musicList: [],
      showMore: true,
      loading: true,
      articleList: [],
      topReadArticlelist: [],
      recommendArticlelist: [],
      bannerList: [],
      scrollReveal: scrollReveal(),
      partnerList: [],
      tagList: [],
      parentId: 0,
      treeData: {
        label: 'name',
        children: 'zones',
        isLeaf: 'isLeaf'
      },
      tabActiveName: 'first',
      expression: [
        '山野万里，你是我藏在微风中的欢喜。',
        '你都如何回忆我，带着笑或是很沉默。'
      ]
    }
  },
  mounted() {
    // 缓存指针
    var _this = this
    _this.$nextTick(function() {
      _this.initScrollRevealOption()
      // 注册scroll事件并监听
      document.addEventListener('scroll', function() {
        var scrollTop = document.documentElement.scrollTop
        _this.scrollTop = scrollTop
        if (scrollTop + window.innerHeight >= document.body.clientHeight) {
          if (!_this.scrollDisable) {
            if (_this.showMore) {
              _this.initData()
            }
          }
        }
      })
      document.addEventListener('touchend', function() {
        var scrollTop = document.documentElement.scrollTop
        _this.scrollTop = scrollTop
        if (scrollTop + window.innerHeight + 20 >= document.body.clientHeight) {
          if (!_this.scrollDisable) {
            if (_this.showMore) {
              _this.initData()
            }
          }
        }
      })
    })
  },
  async created() {
    this.initData()
    this.initBanner()
    this.getRecommendArticleList()
    this.getTopReadArticleList()
    this.initPartner()
    this.initTagList()
    /* this.initMusic() */
  },
  methods: {
    switchDetail(id) {
      var routeData = this.$router.resolve({
        path: 'blog/detail',
        query: { id: id }
      })
      window.open(routeData.href, '_blank')
    },
    treeNodeClick(node) {
      var tree = this.$refs.mycatetree
      var nodes = tree.store.getCheckedNodes()
      var arraycodes = []
      for (var i = 0; i < nodes.length; i++) {
        var tem = nodes[i].code
        arraycodes.push(tem)
      }
      this.queryForm.categoryCodes = arraycodes
      this.articleList = []
      this.queryForm.pageIndex = 1
      this.initData()
    },
    loadCategory(node, resolve) {
      var _this = this
      if (node.level == 0) {
        _this.parentId = 0
      } else {
        _this.parentId = node.data.id
      }
      CategoryApi.getCategoryTreeData(_this.parentId).then(response => {
        if (response.code == 0) {
          resolve(response.data)
          _this.parentId = 0
        }
      })
    },
    initData() {
      var _this = this
      _this.scrollDisable = true
      _this.loading = true
      ArticleApi.listData(_this.queryForm).then(response => {
        if (response.code == 0) {
          _this.loading = false
          var resultCount = response.data.rows.length
          if (resultCount > 0) {
            _this.articleList = _this.articleList.concat(response.data.rows)
            _this.queryForm.pageIndex = _this.queryForm.pageIndex + 1
          }
          _this.showMore =
            resultCount == _this.queryForm.pageSize ? true : false
        }
        // 插入数据完成后
        _this.scrollDisable = false
        _this.initScrollRevealOption()
        //延迟1秒后为样式加载动画  //_this.scrollReveal.sync();//官方说这样可以做异步，然并卵
        /* setTimeout(function(result) {
          _this.initScrollRevealOption()
        }, 1000) */
      })
    },
    initd3cloud(data) {
      var _this = this
      //var fill = d3.scale.category20();
      var formatData = data.map(function(d) {
        return {
          id: d.id,
          text: d.value,
          size: 10 + Math.random() * 50,
          color: d.color
        }
      })
      d3.layout
        .cloud()
        .size([325, 200]) //size([x,y])  词云显示的大小
        .words(formatData)
        .rotate(function() {
          return ~~(Math.random() * 2) * 90
        })
        .font('Impact')
        .fontSize(function(d) {
          return d.size
        })
        .on('end', _this.draw) //结束时运行draw函数
        .start()
    },
    draw(words) {
      var _this = this
      d3.select('#tagcontainer')
        .append('svg')
        .attr('width', 345)
        .attr('height', 205)
        .append('g')
        .attr('transform', 'translate(160,110)')
        .selectAll('text')
        .data(words)
        .enter()
        .append('text')
        .style('font-size', function(d) {
          return d.size + 'px'
        })
        .style('font-family', 'Impact')
        .style('fill', function(d, i) {
          return d.color
        })
        .attr('text-anchor', 'middle')
        .attr('transform', function(d) {
          return 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')'
        })
        .text(function(d) {
          return d.text
        })
        .on('click', function(d) {
          var tag = d.id
          _this.queryForm.tag = tag
          _this.queryForm.pageIndex = 1
          _this.articleList = []
          _this.initData()
          _this.backToTop()
        })
    },
    backToTop() {
      timer = setInterval(function() {
        var osTop =
          document.documentElement.scrollTop || document.body.scrollTop
        var ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    },
    tagClick() {},
    initPartner() {
      var _this = this
      PartnerApi.getPartnerList().then(response => {
        if (response.code == 0) {
          _this.partnerList = response.data
        }
      })
    },
    initBanner() {
      let _this = this
      BannerApi.getBannerList({}).then(response => {
        if (response.code == 0) {
          _this.bannerList = response.data.rows
        }
      })
    },
    /*  formatMusicData(dataList) {
      var arr = []
      for (var item of dataList) {
        var currentModel = {
          url: item.url,
          name: item.title,
          artist: item.singer,
          cover: item.coverUrl
        }
        arr.push(currentModel)
      }
      return arr
    }, */
    /* initMusic() {
      var _this = this
      MusicApi.getMusicList({}).then(response => {
        if (response.code == 0) {
          _this.musicList = _this.formatMusicData(response.data.rows)
        }
      })
    }, */
    initTagList() {
      var _this = this
      TagApi.getTagList().then(response => {
        if (response.code == 0) {
          _this.tagList = response.data
          //_this.initd3cloud(response.data)
        }
      })
    },
    getRecommendArticleList() {
      let _this = this
      ArticleApi.getRecommendArticleList().then(response => {
        if (response.code == 0) {
          _this.recommendArticlelist = response.data
        }
      })
    },
    getTopReadArticleList() {
      let _this = this
      ArticleApi.getTopReadArticleList().then(response => {
        if (response.code == 0) {
          _this.topReadArticlelist = response.data
        }
      })
    },
    initScrollRevealOption() {
      this.scrollReveal.reveal('.blogs', {
        duration: 500, //动画的时长
        delay: 100, //延迟时间
        origin: 'bottom', //动画开始的位置，'bottom', 'left', 'top', 'right'
        reset: true, //回滚的时候是否再次触发动画
        mobile: false, //在移动端是否使用动画
        distance: '10px', //滚动的距离，单位可以用%，rem等
        opacity: 1, //其他可用的动画效果
        easing: 'linear',
        scale: 1
      })
    }
  }
}
</script>
<style scoped>
text {
  cursor: pointer;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  width: 78px !important;
}
#typedItem {
  font-size: 12px;
}
.typed-element {
  display: inline-block !important;
  font-size: 12px !important;
}
.hotmessage {
  /* height: 68px;*/
  z-index: 10;
  /*background: #000;*/
  opacity: 0.9;
}
.hotmessage .item {
  position: relative;
  text-align: center;
  border: none;
  font-size: 18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
}
.typed-element {
  display: block;
}
</style>
